<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="description" content="bootstrap admin template">
  <meta name="author" content="">
  <script type="text/javascript" src="../_resource/js/header.js"></script>
  <script>
    var RUN_FUNCS = [];
	var SITE_URL  = "http://admin.html.me";
	var CURR_CONTROLLER  = "Roles";
	var CURR_ACTION  = "add";
    Breakpoints();
  </script>
  <style type="text/css">
    .list-table table td, .list-table table th{background:#fff; text-align:center;}
    .__access{display: none;}
  </style>
  </head>
<body class="dashboard">
  <!--[if lt IE 8]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation" id="navbardefaultmodel">
       <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('head_html')"></script>
  </nav>
  <div class="site-menubar">
    <div class="site-menubar-body" id="site-menubar-body">
        <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('nav_html')"></script>
    </div>
  </div>

  <!-- Page -->
  <div class="page">
    <div class="page-content container-fluid">
          <style>
        .col-sm-3{padding:2px 0px;}
        .col-sm-9{padding-left:0px;}
         .manage-nav-box{
             border:1px solid #d2d6de;
             border-top:3px solid #d2d6de;
             box-shadow:none;
             margin:0 0 10px 0;
             background-color: #FFF;
         }
        .manage-nav-box .box-header {
            padding: 7px 10px;
            border-bottom: 1px solid #d2d6de;
            position: relative;
        }
        .manage-nav-box .box-title {
            font-size: 14px;
            padding-left: 5px;
            line-height: 14px;
        }
        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }
        .manage-nav-box .box-title div.checker {
            margin-right: 0;
        }
        .manage-nav-box .box-header{padding:7px 10px; border-bottom:1px solid #d2d6de; position: relative;}
        .manage-nav-box .box-body{padding:15px 10px 0 10px;}
        .manage-nav-box div.checker{margin-right:2px;}
        .manage-nav-box .box-title{font-size:14px; padding-left:5px; line-height: 14px;}
        .manage-nav-box .box-title div.checker{margin-right:0;}
        .manage-nav-box .box-title label span{vertical-align:middle; font-weight:normal;}
        .manage-nav-box .box-tools{position: absolute; top:6px; right:8px;}
        .manage-nav-box .box-tools a{color:#ccc;}
        .manage-nav-box .manage-child-navs{margin:10px;}

        .manage-nav-box fieldset {
            border:solid 1px #d2d6de;
            border-radius: 0 0 3px 3px;
            font-size:14px;
        }
        .manage-nav-box fieldset legend {
            padding:0 10px 0 5px;
            width:auto;
            border:none;
            margin:0;
            font-size:14px;
            display: inline-block;
            line-height: 16px;
        }
        .manage-nav-box fieldset legend label{font-weight:normal;}
        .manage-nav-box fieldset legend label span{vertical-align:middle;}
        .manage-nav-box fieldset div.manage-actions {
            padding: 5px 5px;
            line-height: 16px;
        }
        .manage-nav-box fieldset div label{display:inline-block; margin-right:15px; font-weight:normal; line-height: 16px;}
        .manage-nav-box fieldset div label span{vertical-align:middle;}
        .blank15 {
            height: 15px;
            line-height: 10px;
            clear: both;
            visibility: hidden;
        }
        .fl{
            float: left;
        }
        .none{
            display: none;
        }
    </style>
    
<div class="panel form-box" style="background:#f1f4f5">
    <div class="panel-body">
        <form class="validate-form ajax-form" id="bossjobForm">
            <div id="name-form-item" class="form-group" style="">
                <label for="name" class="control-label ">Name<span class="required">*</span>:</label>
                <div>
                    <input type="text" name="name" id="rbac-role-name" class="form-control " style="" placeholder=""  value="" />
                </div>
            </div>

            <div class="form-group">
                <button type="button" id="create-rbac-role" class="btn btn-lg btn-success">Submit</button>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
$(function(){
    $('#create-rbac-role').click(function(){
        var roleName = $('#rbac-role-name').val().trim();
        if(0 == roleName.length){
            $.showError('RBAC role name can not be empty.', 300, function(){}, 1000);
            return false;
        }
        Api.Post('createRbacRole', {name:roleName}, function(object, error){
            if(!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200 && object['status'] == 1){
                $.showSuccess('Create rbac role successfully.', 300, function(){
                    window.location.href = '/Roles/index.html';                  
                });
            }else if(!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200 && object['status'] < 0){
                var info = 'Rbac role '+roleName+' exists.';
                $.showError(info, 300, function () {
                    // window.location.reload();
                });
            }else{
                $.showError('Something Error, Retry Please.', 300, function () {
                    // window.location.reload();
                });
            }
        });
        return false;
    });
});
</script>
    </div>
	
	<!-- Modal -->
	<div class="modal fade" id="confirmModal" aria-hidden="true" role="dialog" tabindex="-1">
	  <div class="modal-dialog modal-center">
		<div class="modal-content">
		  <div class="modal-header">
			<h4 class="modal-title"></h4>
		  </div>
		  <div class="modal-body">
			<p></p>
		  </div>
		  <div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
			<button type="button" class="btn btn-primary"></button>
		  </div>
		</div>
	  </div>
	</div>
	<div class="modal fade" id="alertModal" aria-hidden="true" role="dialog" tabindex="-1">
	  <div class="modal-dialog modal-center">
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">×</span>
            </button>
			<h4 class="modal-title"></h4>
		  </div>
		  <div class="modal-body">
			<p></p>
		  </div>
		</div>
	  </div>
	</div>
	<!-- End Modal -->
  </div>
  <!-- End Page -->

  <!-- Footer -->
  <script type="text/javascript" src="../_resource/js/footer.js"></script>

      <script type="text/javascript">
        //        $(document).off("click", ".selectable-item");
//        $(document).on("click", ".selectable-item", function(){
//            var pid = $(this).attr("data-key-pid");
//            var ischecked =  $(this).is(':checked');
//            if(!ischecked){
//                $(this).removeAttr('checked');
//                $(".fieldset-pid-"+pid).find("input[type='checkbox']").removeAttr("checked");
//            }else{
//                $(this).attr('checked');
//                $(".fieldset-pid-"+pid).find("input[type='checkbox']").attr("checked","checked");
//            }
//            return false;
//        })
    </script>
  <script>
    (function(document, window, $) {
      'use strict';

      var Site = window.Site;
      $(document).ready(function() {
        Site.run();
          $('textarea[maxlength]').maxlength({
              threshold: 1000,
              placement: 'bottom-left-inside'
          });

          $.components.register("datepicker",{mode:"default",defaults:{autoclose:!0}});

        if (RUN_FUNCS.length > 0) {
          for(var i = 0; i < RUN_FUNCS.length; i++) {
            RUN_FUNCS[i].call();
          }
        }
      });
    })(document, window, jQuery);


  </script>
</body>
</html>